<template>
  <div class="deliver-setting">
    <el-form ref="formRef" label-width="auto"> 
      <el-form-item label="内部媒体投递">
        <el-button type="primary" link @click="showChooseCategory = true">添加</el-button>
      </el-form-item>
      <el-form-item label="">
        <div class="deliver-list">
          <div v-for="item in deliverList" :key="item" class="deliver-item">
            <div class="deliver-item-category">
              <span>{{ item.name }}</span>
              <el-button type="primary" link @click="showChooseCategory = true">删除</el-button>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <DialogTree v-model:showDialog="showChooseCategory" :categoryList="categoryList" @treeChoose="submitCategory"></DialogTree>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getCategoryByModelId } from '@/api/category'
import { createTreeData } from '@ruifox-cms/utils'
import { getSiteGroup } from '@/utils/storage'

const props = defineProps({
  modelId: {
    type: String,
    default: ''
  },
  catId: {
    type: String,
    default: ''
  }
})

const showChooseCategory = ref(false)
const deliverList = ref([])

// 获取栏目
const categoryList = ref([])
const handleGetCategory = async () => {
  const res = await getCategoryByModelId({ modelId: props.modelId })
  if (res.code === 20000) {
    const index = res.data.findIndex(item => item.id === props.catId)
    if (index !== -1) {
      res.data.splice(index, 1)
    }
    const list = createTreeData(res.data)
    categoryList.value = getSiteGroup()?.map(item => {
      return {
        name: item.name,
        id: item.id
      }
    })
    categoryList.value.forEach(item => {
      item.children = []
      list.forEach(item2 => {
        if (item2.siteId === item.id) {
          item.children.push(item2)
        }
      })
    })
  }
}
handleGetCategory()

const submitCategory = (data) => {
  console.log(data, 565656)
  deliverList.value.push(data)
}
</script>

<style lang="scss" scoped>

</style>